<template>
  <div>
    <a-card title="查询条件">
      <a-row>
        <a-col class="param_item_label" :span="2">分类名称：</a-col>
        <a-col :span="3">
          <a-input v-model:value="param.name"/>
        </a-col>
        <a-col :span="1"/>
        <a-col class="param_item_label" :span="2">用户名称：</a-col>
        <a-col :span="3">
          <a-input v-model:value="param.userName"/>
        </a-col>
        <a-col :span="1"/>
      </a-row>
      <div class="operation_row">
        <a-button type="primary" @click="getPage(1,10)">查询</a-button>
      </div>
    </a-card>
    <br>
    <a-card title="分类列表">
      <a-table rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="pagination" :loading="loading"
               bordered>
        <template #action="{ record }">
          <span>
            <router-link :to="`/u/${record.userDomain}?tab=blog&classification=${record.id}`">查看</router-link>
            <a-divider type="vertical"/>
            <a-popconfirm title="确认删除该分类吗?" @confirm="commitDelete(record)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, onMounted, reactive, toRefs } from 'vue'
import { DeleteClassificationForManage, GetClassificationPage } from '@/service/blog'

export default defineComponent({
  setup () {
    const { proxy } = getCurrentInstance()
    const state = reactive({
      param: {
        name: '',
        userName: ''
      },
      loading: true,
      dataSource: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: async (page, size) => {
          await methods.getPage(page, size)
        }
      },
      columns: [{
        title: 'ID',
        dataIndex: 'id',
        width: '25%'
      }, {
        title: '分类名称',
        dataIndex: 'name',
        width: '25%'
      }, {
        title: '所属用户',
        dataIndex: 'userName',
        width: '20%'
      }, {
        title: '创建时间',
        dataIndex: 'createdTime',
        width: '15%'
      }, {
        title: '操作',
        key: 'action',
        slots: {
          customRender: 'action'
        }
      }]
    })

    const methods = reactive({
      getPage: async (page, size) => {
        state.loading = true
        const {
          count,
          list
        } = await GetClassificationPage(state.param.name, state.param.userName, page, size)
        state.pagination.current = page
        state.pagination.pageSize = size
        state.pagination.total = count
        state.dataSource = list
        state.loading = false
      },
      commitDelete: async (classification) => {
        await DeleteClassificationForManage(classification.id)
        proxy.$message.success(`删除分类[${classification.name}]成功！`)
        await methods.getPage(1, 10)
      }
    })

    onMounted(async () => {
      await methods.getPage(1, 10)
    })

    return {
      ...toRefs(state),
      ...toRefs(methods)
    }
  }
})
</script>

<style scoped>

</style>
